<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal"
        data-target="#add">新增面试题
</button>
<div>
    <table class="table">
        <thead>
        <tr>
            <th>主题</th>
            <th>内容</th>
            <th>创建者</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in interviews">
            <td>{{row.title}}</td>
            <td>{{row.content}}</td>
            <td>{{row.creator}}</td>
            <td>{{row.createTime}}</td>
            <td>
                <button type="button" class="btn btn-primary"
                        data-toggle="modal" data-target="#update"
                        ng-click="transferValue(row,$index)">修改
                </button>
                <button type="button" class="btn btn-primary" data-toggle="modal"
                        data-target="#delete" ng-click="transferValue(row,$index)">
                    删除
                </button>
            </td>
        </tr>
        </tbody>
    </table>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" ng-click="previousPage()">Previous</a></li>
        <!-- <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li> -->
        <li class="page-item"><a class="page-link" ng-click="nextPage()">Next</a></li>
    </ul>


    <!-- 删除面试题 -->
    <div class="modal fade" id="delete">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">删除面试题</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    你确定要删除面试题<span style="color: red">{{model.title}}</span>吗，删除之后不可恢复？
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button ng-click="deleteInterview()" type="button"
                            class="btn btn-secondary" data-dismiss="modal">确定
                    </button>
                    <button type="button" class="btn btn-secondary"
                            data-dismiss="modal">取消
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 更新面试题 -->
    <div class="modal fade" id="update" role="dialog" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times</button>
                    <h4 class="modal-title">修改</h4>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="user.nickName" class="col-sm-3 control-label">主题</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="user.nickName" type="text" ng-model="model.title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="user.userName" class="col-sm-3 control-label">内容</label>
                            <div class="col-sm-6">
                                <textarea class="form-control" id="user.userName" type="text"
                                          ng-model="model.content"></textarea>
                            </div>
                        </div>
                    </form>
                </div>


                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button ng-click="updateInterview()" type="button"
                            class="btn btn-secondary" data-dismiss="modal">确定
                    </button>
                    <button type="button" class="btn btn-secondary"
                            data-dismiss="modal">取消
                    </button>
                </div>

            </div>
        </div>
    </div>

    <!-- 增减面试题 -->
    <div class="modal fade" id="add" role="dialog" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times</button>
                    <h4 class="modal-title">新增面试题</h4>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="title" class="col-sm-3 control-label">标题</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="title" type="text" ng-model="model.title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="comment" class="col-sm-3 control-label">详细内容</label>
                            <div class="col-sm-6">
                                <textarea class="form-control" id="comment" type="text"
                                          ng-model="model.content"></textarea>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button ng-click="addInteview()" type="button"
                            class="btn btn-primary" data-dismiss="modal">确定
                    </button>
                    <button type="button" class="btn btn-secondary"
                            data-dismiss="modal">取消
                    </button>
                </div>

            </div>
        </div>
    </div>